<template>
	<view>
		<view class="uni-margin-wrap pore draw" id="ban">
			<image :src="api_host + banner" mode="widthFix" class="width100 draw"></image>
		</view>
		<view class="ml30 mr30 content-box pore">
			<u-gap height="20"></u-gap>
			<view class="flex-jus">
				<text class="bold c343">{{title}}政策</text>
				<u-icon name="arrow-right" color="#333" size="12" label="更多" labelSize="12" labelPos="left"
					@click="nologinJump('/foodpages/things/list')"></u-icon>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff p20 radius50" v-if="listData.length > 0">
				<view class="f26 c343 textoverflow mb20 mt20" v-for="(item,index) in listData" :key="index"
					@click="nologinJump('/foodpages/things/detail?id='+item.id)">
					【{{item.zoneCategory.name}}】{{item.title}}</view>
			</view>
			<view v-if="queryMatters.length > 0">
				<u-gap height="20"></u-gap>
				<view class="bgFff radius50">
					<view class="bg p30 pore">
						<view class="bold c343 italic-text"><text class="blue">快速</text>查询</view>
						<view class="right-icon">
							<image src="../static/images/things/query.png" mode=""></image>
						</view>
					</view>
					<view class="p20">
						<view class="f26 c343 mb20 mt20 flex" v-for="(item,index) in queryMatters" :key="index"
							@click="nologinJump('/foodpages/things/file?id='+item.id+'&name='+item.name)">
							<image :src="api_host + item.icon" mode="" style="width: 30rpx;height: 30rpx;"></image>
							<text class="textoverflow flex1 ml10">【{{item.zoneCategory.name}}】{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="guideMatters.length > 0">
				<u-gap height="20"></u-gap>
				<view class="bgFff radius50">
					<view class="bg p30 pore">
						<view class="bold c343 italic-text"><text class="blue">办理</text>指引</view>
						<view class="right-icon">
							<image src="../static/images/things/guide.png" mode=""></image>
						</view>
					</view>
					<view class="p20">
						<view class="f26 c343 mb20 mt20 flex" v-for="(item,index) in guideMatters" :key="index"
							@click="nologinJump('/foodpages/things/file?id='+item.id+'&name='+item.name)">
							<image :src="api_host + item.icon" mode="" style="width: 30rpx;height: 30rpx;"></image>
							<text class="textoverflow flex1 ml10">【{{item.zoneCategory.name}}】{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20"></u-gap>
	</view>
</template>

<script>
	import {
		getZoneinfo
	} from '@/common/api_things.js'
	export default {
		name: '',
		data() {
			return {
				id: '',
				banner:'',
				title: '',
				listData: [],
				queryMatters: [],
				guideMatters: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.title = option.name || '专题专区'
			uni.setNavigationBarTitle({
				title: this.title + '专区'
			})
			this.getZoneinfo()
		},
		methods: {
			async getZoneinfo() {
				uni.showLoading({
					mask: true
				})
				const res = await getZoneinfo({
					id: this.id
				})
				if (res.code == 200) {
					const {
						banner,
						policys,
						guideMatters,
						queryMatters
					} = res.data
					this.banner = banner
					this.listData = policys
					this.guideMatters = guideMatters
					this.queryMatters = queryMatters
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F7FF;
	}
	.bg {
		background-color: #D0E5FF;
		background-image: linear-gradient(to bottom, #D0E5FF, #fff);
		padding: 30rpx 30rpx 0 30rpx;
	}
	.right-icon{
		position: absolute;
		right: 0;
		top: 0;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>